<!--
  -    Copyright (c) 2018-2025, lengleng All rights reserved.
  -
  - Redistribution and use in source and binary forms, with or without
  - modification, are permitted provided that the following conditions are met:
  -
  - Redistributions of source code must retain the above copyright notice,
  - this list of conditions and the following disclaimer.
  - Redistributions in binary form must reproduce the above copyright
  - notice, this list of conditions and the following disclaimer in the
  - documentation and/or other materials provided with the distribution.
  - Neither the name of the pig4cloud.com developer nor the names of its
  - contributors may be used to endorse or promote products derived from
  - this software without specific prior written permission.
  - Author: lengleng (wangiegie@gmail.com)
  -->

<template>
  <div class="app-container calendar-list-container" v-loading="loading">
    <el-form style="width: 650px;" label-width="120px" :rules="rules" :model="form" ref="form">
      <div class="title">品牌信息</div>
      <el-form-item label="品牌名称:" prop="name">
        <el-input v-model="form.name" placeholder="请输入商品名称" class="inputRow"></el-input>
      </el-form-item>
      <el-form-item label="品牌LOGO:" prop="logo">
        <el-upload class="avatar-uploader" action="/app/sys/oss/upload"  :show-file-list="false" :on-success="handleAvatarSuccess">
          <img v-if="form.logo" :src="form.logo" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="形象背景图:" prop="background">
        <el-upload class="avatar-uploader" action="/app/sys/oss/upload"  :show-file-list="false" :on-success="handleBackgroundSuccess">
          <img v-if="form.background" :src="form.background" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="品牌签名标签:" prop="label">
        <el-input v-model="form.label" type="textarea" resize="none" rows="5" placeholder="品牌签名标签的填写将展示在泳衣库商城中品牌介绍中，请认真填写。" class="inputRow"></el-input>
      </el-form-item>
      <el-form-item label="品牌宗旨:" prop="purpose">
        <el-input v-model="form.purpose" type="textarea" resize="none" rows="5" placeholder="品牌宗旨的填写将展示在泳衣库商城中品牌介绍中，请认真填写。" class="inputRow"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSubmit('form')">提交</el-button>
        <!--<el-button @click="resetForm('form')">重置</el-button>-->
      </el-form-item>
    </el-form>
    <el-dialog :visible.sync="previewVisible">
      <img width="100%" :src="previewImageUrl">
    </el-dialog>
  </div>
</template>

<script>
  import { mapGetters, mapState } from 'vuex'
  import { publishGood } from '@/api/goods'
  import { getBrandInfo } from '@/api/user'
  export default {
    name: 'seller_index',
    data() {
      return {
        goodsId: '', // 商品id
        userId: '', // userId
        brandId: '', // 品牌id
        loading: false, // 加载中
        previewVisible: false, // 图片预览显示
        previewImageUrl: '', // 图片预览
        form: {
          name: '', // 品牌名称
          logo: '', // logo
          background: '', // 背景图
          label: '', // 标签
          purpose: '' // 宗旨
        }, // 表单内容
        rules: {
          name: [
            {
              required: true,
              message: '请输入品牌名称',
              trigger: 'blur'
            }
          ],
          logo: [
            {
              required: true,
              message: '请上传logo',
              trigger: 'blur'
            }
          ],
          background: [
            {
              required: true,
              message: '请上传背景图',
              trigger: 'blur'
            }
          ],
          label: [
            {
              required: true,
              message: '请输入标签',
              trigger: 'blur'
            }
          ],
          purpose: [
            {
              required: true,
              message: '请输入品牌宗旨',
              trigger: 'blur'
            }
          ]
        }
      }
    },
    computed: {
      ...mapGetters(['permissions']),
      ...mapState({
        userInfo: state => state.user.userInfo
      })
    },
    created() {
      const that = this
      that.userId = this.userInfo.userId
      that.brandStatus = this.userInfo.brandStatus
      getBrandInfo(that.userId).then(res => {
        if (res.data.data.brandInfo) {
          const info = res.data.data.brandInfo
          that.form.name = info.name
          that.form.logo = info.logo
          that.form.background = info.background
          that.form.label = info.label
          that.form.purpose = info.purpose
          that.brandId = info.id
        }
      })
    },
    methods: {
      handleAvatarSuccess(res) {
        this.form.logo = res.data
      }, // logo上传
      handleBackgroundSuccess(res) {
        this.form.background = res.data
      }, // background上传
      handlePictureCardPreview(file) { // 预览图片
        this.previewImageUrl = file.url
        this.previewVisible = true
      },
      handleSubmit() { // 提交发布
        const that = this
        that.$refs['form'].validate((valid) => {
          if (valid) {
            const params = that.form
            params.userId = that.userId
            const url = that.brandId ? '/app/sysUserBrandInfo/update' : '/app/sysUserBrandInfo/add'
            if (that.brandId) {
              params.id = that.brandId
            }
            publishGood(url, params).then((res) => {
              if (res.data.code === '0') {
                that.$message({
                  message: '操作成功',
                  type: 'success'
                })
                setTimeout(() => {
                  that.$router.go(0)
                }, 500)
              }
            })
          } else {
            return false
          }
        })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields()
      }
    }
  }
</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
</style>
<style scoped>
  .title{
    font-weight: bold;
    font-size: 24px;
    margin-bottom: 15px;
  }
  .select-group {
    width: 200px!important;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    display: block;
    width: 178px;
    height: 178px;
  }
  .el-loading-spinner .el-loading-text {
    text-align: center;
  }
  .coor-title {
    float: left;
    font-size: 14px;
    color: #606266;
    line-height: 40px;
  }
  .coor-input {
    float: left;
    -webkit-appearance: none;
    background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #606266;
    font-size: 14px;
    width: 200px;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
  }
  .coorPrice-item {
    margin-bottom: 22px;
  }
  .coor-price {
    float: left;
    -webkit-appearance: none;
    background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #606266;
    font-size: 14px;
    width: 100px;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
  }
</style>
